<template>
  <div>
    <SearchTop @search="searchHandler" @adduser="addUserHandler"></SearchTop>
    <UserList :tableData="tableData" @edit="editHandler" @remove="removeUserHandler" @check="checkHandler"></UserList>
    <PaginationView v-model:pageSize="pageSize" v-model:pageNum="pageNum" :total="total"></PaginationView>
  <AddAndEdit v-model="editVisible" @save="saveHandler" :data="eidtData"></AddAndEdit>
  <Check v-model="checkVisible" :data="eidtData"></Check>
</div>
</template>

<script lang="ts" setup>
import { addUser, editUser, getUserList } from '@/api/UserApi';
import PaginationView from '@/componenets/user/PaginationView.vue';
import SearchTop from '@/componenets/user/SearchTop.vue';
import UserList from '@/componenets/user/UserList.vue';
import type { IResult, ITableList } from '@/interfaces/IApi';
import type { ISearchFormData, IUserTableItem } from '@/interfaces/IUser';
import { onBeforeMount ,ref,watchEffect,type Ref} from 'vue'
import { searchUser ,deleteUser} from '@/api/UserApi'
import AddAndEdit from '@/componenets/user/AddAndEdit.vue';
import Check from '@/componenets/user/Check.vue';
const pageNum:Ref<number>=ref(1);
const pageSize:Ref<number>=ref(5);
const tableData:Ref<IUserTableItem[]>=ref([]);  
const total:Ref<number>=ref(0)
const editVisible:Ref<boolean> = ref(false)
const checkVisible:Ref<boolean> = ref(false)
  const eidtData:Ref<IUserTableItem|null>=ref(null)
  watchEffect(async()=>{
   const result:ITableList=await getUserList(pageNum.value,pageSize.value)
   tableData.value=result.users;
   total.value=result.total
  console.log(tableData.value)
  })
// onBeforeMount(()=>{
//     renderTable()
// })
// async function renderTable(){
//    const result=await getUserList(pageNum.value,pageSize.value)
// }
const getList=async()=>{
  const result:ITableList=await getUserList(pageNum.value,pageSize.value)
   tableData.value=result.users;
   total.value=result.total
}
const searchHandler=async(formData:ISearchFormData)=>{
  
  // 支持用户名和电话号码的本地搜索
  const { username, phonenumber } = formData;
  if (!username && !phonenumber) {
    getList();
    return;
  }
  // 本地过滤
  const result = tableData.value.filter(item => {
    const matchName = username ? item.username.includes(username) : true;
    const matchPhone = phonenumber ? item.phonenumber.includes(phonenumber) : true;
    return matchName && matchPhone;
  });
  tableData.value = result;
  total.value = result.length;
  console.log('搜索结果:', result);
}
const addUserHandler=()=>{
  eidtData.value=null
  editVisible.value = true
}
const editHandler =(row:IUserTableItem)=>{
  eidtData.value=row
  editVisible.value = true
  console.log(row)
}
const saveHandler=async(formData:IUserTableItem,bool:boolean)=>{
  console.log('bool:', bool)
    let result:IResult
  if(bool){
       result=await editUser(formData)
       console.log(formData)
  } else{
       result=await  addUser(formData)
       
        console.log(formData)
  }
  console.log(result.data)
  if(result.data){
   const idx=tableData.value.findIndex(item=>item.id===formData.id)
    if(idx>-1){
      tableData.value[idx]={...formData}
  }  
  else{
      tableData.value.unshift(formData)
      total.value+=1
  }
  editVisible.value = false;
}
}

const removeUserHandler = async (id: number) => {
      tableData.value = tableData.value.filter(item =>item.id !== id);
}
const checkHandler=(row:IUserTableItem)=>{
  eidtData.value=row
  checkVisible.value = true
  console.log(row)
}
</script>

<style lang="scss" scoped>
div{
  width: 100%;
  // height: 50%;
}
</style>
